﻿<!DOCTYPE html>
<html xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>
    <title>乐优商城--商品搜索结果页</title>
    <link rel="icon" href="/img/assets/img/favicon.ico">
    <link href='/css/material.css' rel="stylesheet">
    <link href="/css/vuetify.min.css" rel="stylesheet">
    <script src="/js/vue/vue.js"></script>
    <script src="/js/vue/vuetify.js"></script>
    <script src="/js/axios.min.js"></script>
    <script src="/js/common.js"></script>
    <link rel="stylesheet" type="text/css" href="/css/webbase.css"/>
    <link rel="stylesheet" type="text/css" href="/css/pages-list.css"/>
    <link rel="stylesheet" type="text/css" href="/css/widget-cartPanelView.css"/>
    <style type="text/css">
        * {
            box-sizing: unset;
        }

        .btn-arrow, .btn-arrow:visited, .btn-arrow:link, .btn-arrow:active {
            width: 46px;
            height: 23px;
            border: 1px solid #DDD;
            background: #FFF;
            line-height: 23px;
            font-family: "\5b8b\4f53";
            text-align: center;
            font-size: 16px;
            color: #AAA;
            text-decoration: none;
            out-line: none
        }

        .btn-arrow:hover {
            background-color: #1299ec;
            color: whitesmoke;
        }

        .top-pagination {
            display: block;
            padding: 3px 15px;
            font-size: 11px;
            font-weight: 700;
            line-height: 18px;
            color: #999;
            text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
            text-transform: uppercase;
            float: right;
            margin-top: 6px
        }

        .top-pagination span {
            margin-right: 10px;
        }

        .logo-list li {
            padding: 8px;
        }

        .logo-list li:hover {
            background-color: #f3f3f3;
        }

        .type-list a:hover {
            color: #1299ec;
        }

        .skus {
            list-style: none;
        }

        .skus li {
            list-style: none;
            display: inline-block;
            float: left;
            margin-left: 2px;
            border: 2px solid #f3f3f3;
        }

        .skus li.selected {
            border: 2px solid #dd1144;
        }

        .skus img {
            width: 25px;
            height: 25px;
        }
    </style>
    <script type="text/javascript" src="/js/plugins/jquery/jquery.min.js"></script>
    <script src="../../js/pages/main.js"></script>
</head>

<body>

<div id="searchApp">
    <div id="nav-bottom">
        <ly-top/>
    </div>
    <!--list-content-->
    <div class="main">
        <div class="py-container">

            <div class="bread">
                <!--面包屑-->
                <!--<ul class="fl sui-breadcrumb">
                    <li><span>全部结果:</span></li>
                    <li><a href="#">手机</a></li>
                    <li><span>手机通讯</span></li>
                </ul>-->
                <!--已选择过滤项-->
                <ul class="tags-choose" id="tags-choose">
                    <!-- <li class="tag">
                         品牌:<span style="color: red">apple</span>
                         <i class="sui-icon icon-tb-close"></i>
                     </li>
                     <li class="tag">
                         内存:<span style="color: red">4G</span>
                         <i class="sui-icon icon-tb-close"></i>
                     </li>-->
                </ul>
                <div class="clearfix"></div>
            </div>
            <!--selector-->
            <div class="clearfix selector" style="display: block">
                <div>
                    <div style="width: 300px;background-color: #7a7a7a;display: inline-block;text-align: center;border-right: 5px"
                         id="spec">
                        <div class="brand">品牌</div>
                    </div>
                    <div style="display: inline-block;width: 880px;border: 1px #cccccc" id="specification">
                        <div class="brandValue"></div>
                        <div class="specification1"></div>
                        <div class="specification2"></div>
                        <div class="specification3"></div>
                        <div class="specification4"></div>
                    </div>
                </div>

                <div class="type-wrap" v-for="(f,index) in filters" :key="index" v-if="f.k !='品牌'"
                     v-show="index < 5 || show" style="display: block">

                    <div class="fl key">品牌</div>
                    <div class="fl value">
                        <ul class="type-list">
                            <li v-for="(o,j) in f.options" :key="j" @click="selectFilter(f.k, o)">
                                <a>{{o.name}}</a>
                            </li>
                        </ul>
                    </div>
                    <div class="f1 ext">1</div>
                </div>
                <div class="type-wrap logo" v-else>
                    <div class="fl key brand">{{f.k}}</div>
                    <div class="value logos">
                        <ul class="logo-list">
                            <li v-for="(o,j) in f.options" :key="j" v-if="o.image" @click="selectFilter(f.k, o)"><img
                                    :src="o.image"/></li>
                            <li style="text-align: center" v-else @click="selectFilter(f.k, o)"><a
                                    style="line-height: 30px; font-size: 12px" href="#">{{o.name}}</a></li>
                        </ul>
                    </div>
                    <div class="fl ext">
                        <a href="javascript:void(0);" class="sui-btn">多选</a>
                    </div>
                </div>
                <div class="type-wrap" style="text-align: center">
                    <v-btn small flat @click="show=true" v-show="!show">
                        更多
                        <v-icon>arrow_drop_down</v-icon>
                    </v-btn>
                    <v-btn small="" flat @click="show=false" v-show="show">
                        收起
                        <v-icon>arrow_drop_up</v-icon>
                    </v-btn>
                </div>
            </div>
            <!--details-->
            <div class="details">
                <div class="sui-navbar">
                    <div class="navbar-inner filter">
                        <ul class="sui-nav">
                            <li class="active" value="1">
                                <a href="#">综合</a>
                            </li>
                            <li class="active" value="1">
                                <a onclick="SalesOrder()">销量</a>
                            </li>
                            <li class="active" value="1">
                                <a href="#">新品</a>
                            </li>
                            <li class="active"  value="1">
                                <a href="#">评价</a>
                            </li>
                            <li class="active"  value="1">
                                <a onclick="ThePriceSorted()">价格</a>
                            </li>
                        </ul>
                        <div class="top-pagination">
                            <span>共 <i style="color: #222;" class="count"></i> 商品</span>
                            <!-- <span><i style="color: red;">{{search.page}}</i>{{totalPage}}</span>
                             <a class="btn-arrow" href="#" style="display: inline-block" @click="prev()">&lt;</a>
                             <a class="btn-arrow" href="#" style="display: inline-block" @click="next()">&gt;</a>-->
                        </div>
                    </div>
                </div>
                <div class="goods-list">
                    <ul class="yui3-g  g3">
                        <!-- <li class="yui3-u-1-4">
                            <div class="list-wrap">
                                <div class="p-img">
                                    <img src="/img/like_01.png"/>
                                </div>
                                <div class="attr">
                                    <em>Apple苹果iPhone 6s (A1699)</em>
                                </div>
                                <div class="price">
                                    <strong>
                                        <em>¥</em>
                                        <i>4088.00</i>
                                    </strong>
                                </div>
                                <div class="commit">
                                    <i class="command">已有700人评价</i>
                                </div>
                                <button type="button" name="button" value="加入到购物车"></button>
                            </div>
                        </li>-->
                    </ul>
                    <!-- <ul class="yui3-g">
                         <li class="yui3-u-1-5" v-for="(goods,index) in goodsList" :key="index">
                             <div class="list-wrap">
                                 <div class="p-img">
                                     <a :href="'item/' + goods.id + '.html'" target="_blank"><img :src="goods.selected.image" height="200"/>1</a>
                                     <ul class="skus">
                                         <li :class="{selected: goods.selected.id==sku.id}" v-for="(sku,j) in goods.skus" @mouseOver="goods.selected=sku">
                                             <img :src="sku.image">
                                         </li>
                                     </ul>
                                 </div>
                                 <div class="clearfix"></div>
                                 <div class="price">
                                     <strong>
                                         <em>¥</em>
                                         <i>500</i>
                                     </strong>
                                 </div>
                                 <div class="attr">
                                     <em>1</em>
                                 </div>
                                 <div class="cu">
                                     <em>455</em>
                                 </div>
                                 <div class="commit">
                                     <i class="command">已有2000人评价</i>
                                 </div>
                                 <div class="operate">
                                     <a href="success-cart.html" target="_blank" class="sui-btn btn-bordered btn-danger">加入购物车</a>
                                     <a href="javascript:void(0);" class="sui-btn btn-bordered">对比</a>
                                     <a href="javascript:void(0);" class="sui-btn btn-bordered">关注</a>
                                 </div>
                             </div>
                         </li>
                     </ul>-->
                </div>
                <div class="fr">
                    <div class="sui-pagination pagination-large">
                        <ul>
                            <li class="prev" :class="{disabled: search.page == 1}" @click="prev()">
                                <a class="flipPage" >«上一页</a>
                            </li>
                            <li :class="{active1: search.page == index(i)}" v-for="i in Math.min(5,totalPage)"
                                @click="search.page=index(i)">
                                <a href="#" id="pageIndex">{{index(i)}}</a>
                            </li>
                            <li class="dotted"><span>...</span></li>
                            <li class="next" :class="{disabled: search.page == totalPage}" @click="next()">
                                <a class="flipPage" >下一页»</a>
                            </li>
                        </ul>
                        <div>共<span class="totalPage"></span><span>
      到第
      <input type="text" class="page-num" id="totalPage" value="">
      页 <button class="page-confirm" onclick="confirm()">确定</button></span></div>
                    </div>
                </div>
            </div>
            <!--hotsale-->
            <div class="clearfix hot-sale">
                <h4 class="title">热卖商品</h4>
                <div class="hot-list">
                    <ul class="yui3-g hot">
                        <!--<li class="yui3-u-1-4">
                            <div class="list-wrap">
                                <div class="p-img">
                                    <img src="/img/like_01.png"/>
                                </div>
                                <div class="attr">
                                    <em>Apple苹果iPhone 6s (A1699)</em>
                                </div>
                                <div class="price">
                                    <strong>
                                        <em>¥</em>
                                        <i>4088.00</i>
                                    </strong>
                                </div>
                                <div class="commit">
                                    <i class="command">已有700人评价</i>
                                </div>
                            </div>
                        </li>
                        <li class="yui3-u-1-4">
                            <div class="list-wrap">
                                <div class="p-img">
                                    <img src="/img/like_03.png"/>
                                </div>
                                <div class="attr">
                                    <em>金属A面，360°翻转，APP下单省300！</em>
                                </div>
                                <div class="price">
                                    <strong>
                                        <em>¥</em>
                                        <i>4088.00</i>
                                    </strong>
                                </div>
                                <div class="commit">
                                    <i class="command">已有700人评价</i>
                                </div>
                            </div>
                        </li>
                        <li class="yui3-u-1-4">
                            <div class="list-wrap">
                                <div class="p-img">
                                    <img src="/img/like_04.png"/>
                                </div>
                                <div class="attr">
                                    <em>256SSD商务大咖，完爆职场，APP下单立减200</em>
                                </div>
                                <div class="price">
                                    <strong>
                                        <em>¥</em>
                                        <i>4068.00</i>
                                    </strong>
                                </div>
                                <div class="commit">
                                    <i class="command">已有20人评价</i>
                                </div>
                            </div>
                        </li>
                        <li class="yui3-u-1-4">
                            <div class="list-wrap">
                                <div class="p-img">
                                    <img src="/img/like_02.png"/>
                                </div>
                                <div class="attr">
                                    <em>Apple苹果iPhone 6s (A1699)</em>
                                </div>
                                <div class="price">
                                    <strong>
                                        <em>¥</em>
                                        <i>4088.00</i>
                                    </strong>
                                </div>
                                <div class="commit">
                                    <i class="command">已有700人评价</i>
                                </div>
                            </div>
                        </li>-->
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
    var vm = new Vue({
        el: "#searchApp",
        data: {
            ly,
            search: {
                key: "",
                page: 1,
                filter: {}
            },
            goodsList: [],
            totalPage: 1,
            total: 0,
            filters: [],
            show: false
        },
        created() {
            if (!location.search) {
                return;
            }
            const search = ly.parse(location.search.substring(1));
            search.page = parseInt(search.page) || 1;
            search.filter = search.filter || {};
            this.search = search;

            this.loadData();

        },
        watch: {
            search: {
                deep: true,
                handler(newVal, oldVal) {
                    if (!oldVal || !oldVal.key) {
                        return;
                    }
                    window.location = "http://www.leyou.com/search.html?" + ly.stringify(this.search);
                }
            }
        },
        methods: {
            loadData() {
                ly.http.post("/search/page", this.search).then(({data}) => {

                    data.items.forEach(goods => {
                        goods.skus = JSON.parse(goods.skus);
                        goods.selected = goods.skus[0];
                    });
                    this.goodsList = data.items;
                    this.totalPage = data.totalPage;
                    this.total = data.total;
                    this.filters.push({
                        k: "分类",
                        options: data.categories
                    });
                    this.filters.push({
                        k: "品牌",
                        options: data.brands
                    });
                    data.specs.forEach(spec => {
                        spec.options = spec.options.map(o => ({name: o}))
                        this.filters.push(spec);
                    })
                }).catch(() => {

                });
            },
            index(i) {
                if (this.search.page <= 3 || this.totalPage <= 5) {
                    return i;
                } else if (this.search.page >= this.totalPage - 2) {
                    return this.totalPage - 5 + i;
                } else {
                    return this.search.page - 3 + i;
                }
            },
            prev() {
                if (this.search.page > 1) {
                    this.search.page--;
                }
            },
            next() {
                if (this.search.page < this.totalPage) {
                    this.search.page++;
                }
            },
            selectFilter(k, o) {
                let obj = {};
                Object.assign(obj, this.search);
                if (k == "品牌" || k == "分类") {
                    obj.filter[k] = o.id;
                } else {
                    obj.filter[k] = o.name
                }
                this.search = obj;
            }
        },
        components: {
            lyTop: () => import("/js/pages/top.js")
        }
    });
</script>
<!-- 底部栏位 -->
<!--页面底部，由js动态加载-->
<!--<div class="clearfix footer"></div>-->
<script type="text/javascript">$(".footer").load("foot.html");</script>
<!--页面底部END-->

</body>
<!--购物车单元格 模板-->
<script type="text/template" id="tbar-cart-item-template">
    <div class="tbar-cart-item">
        <div class="jtc-item-promo">
            <em class="promo-tag promo-mz">满赠<i class="arrow"></i></em>
            <div class="promo-text">已购满600元，您可领赠品</div>
        </div>
        <div class="jtc-item-goods">
            <span class="p-img"><a href="#" target="_blank"><img src="{2}" alt="{1}" height="50" width="50"/></a></span>
            <div class="p-name">
                <a href="#">{1}</a>
            </div>
            <div class="p-price"><strong>¥{3}</strong>×{4}</div>
            <a href="#none" class="p-del J-del">删除</a>
        </div>
    </div>
</script>
<!--侧栏面板结束-->
<script type="text/javascript" src="/js/plugins/jquery/jquery.min.js"></script>
<script type="text/javascript">
    $(function () {
        $("#service").hover(function () {
            $(".service").show();
        }, function () {
            $(".service").hide();
        });
        $("#shopcar").hover(function () {
            $("#shopcarlist").show();
        }, function () {
            $("#shopcarlist").hide();
        });

    })
</script>
<script type="text/javascript" src="/js/model/cartModel.js"></script>
<script type="text/javascript" src="/js/czFunction.js"></script>
<script type="text/javascript" src="/js/plugins/jquery.easing/jquery.easing.min.js"></script>
<script type="text/javascript" src="/js/plugins/sui/sui.min.js"></script>
<script type="text/javascript" src="/js/widget/cartPanelView.js"></script>
<script src="/js/Jquery/jquery-3.5.1.js"></script>
<script type="text/javascript">
    var url = window.location.href;
    var parameter = url.substring(41 ,43);
    var goodsRequestDto = "";
    if (parameter == "id") {
        var categoryId = url.substring(44);
        goodsRequestDto = {
            "categoryId": categoryId
        }
        var specType = ""
        var specBrandValueType = "";

        /*通过类型显示商品*/
        $.ajax({
            url: "/goods/query/list",
            type: "get",
            data: goodsRequestDto,
            dataType: "json",
            success: function (data) {
                console.log(data.data);
                $(".hhhhoi").remove();
                $(".count").text(null);
                $(".totalPage").text(null);
                $("#pageIndex").text(null);
                $("#pageIndex").text(data.data.pageIndex);
                $(".count").append(data.data.totalRows);
                $(".totalPage").append(data.data.totalPage);
                console.log($(".input-xxlarge"),data.data.goodsDtoList[0].categoryName);
                setTimeout(function () {
                    $(".input-xxlarge").val(data.data.goodsDtoList[0].categoryName)
                },800)
                for (let i = 0; i < data.data.goodsDtoList.length; i++) {
                    $(".g3").append(
                        "                        <li class=\"yui3-u-1-5 hhhhoi\" value=" + data.data.goodsDtoList[i].id + ">" +
                        "                            <div class=\"list-wrap\">" +
                        "                                <div class=\"p-img\">" +
                        "                                    <img src=" + data.data.goodsDtoList[i].goodsImgDtoList[0].goodsImg + " />" +
                        "                                </div>" +
                        "                                <div class=\"attr\">\n" +
                        "                                    <em>" + data.data.goodsDtoList[i].productName + "</em>\n" +
                        "                                </div>\n" +
                        "                                <div class=\"price\">\n" +
                        "                                    <strong>\n" +
                        "                                        <em>¥</em>\n" +
                        "                                        <i>" + data.data.goodsDtoList[i].price + "</i>\n" +
                        "                                    </strong>\n" +
                        "                                </div>\n" +
                        "                            </div>\n" +
                        "                        </li>");
                }

            }
        })

        /*通过点击类型显示规格值*/
        $.ajax({
            url: "/specification/value",
            type: "get",
            data: goodsRequestDto,
            dataType: "json",
            success: function (s) {
                console.log(s);
                $(s.data).each(function () {
                    specType += "<div>" + this.name + "</div>";
                })
                $("#spec").append(specType);
                for (let i = 0; i < s.data[0].brandDtoList.length; i++) {
                    specBrandValueType += "<span style='padding-right: 30px'><a  class='brandId' value=" + s.data[0].brandDtoList[i].id + ">" + s.data[0].brandDtoList[i].brandName + "</a></span>"
                }
                $(".brandValue").append(specBrandValueType);
                for (let i = 0; i < s.data[0].specificationValueDtoList.length; i++) {
                    $(".specification1").append("<span style='padding-right: 30px'>" +
                        "<a class='id' value=" + s.data[0].specificationValueDtoList[i].id + ">" + s.data[0].specificationValueDtoList[i].name + "</a></span>");
                }
                for (let i = 0; i < s.data[1].specificationValueDtoList.length; i++) {
                    $(".specification2").append("<span style='padding-right: 30px'>" +
                        "<a class='id' value=" + s.data[1].specificationValueDtoList[i].id + ">" + s.data[1].specificationValueDtoList[i].name + "</a></span>");
                }
                for (let i = 0; i < s.data[2].specificationValueDtoList.length; i++) {
                    $(".specification3").append("<span style='padding-right: 30px'>" +
                        "<a class='id' value=" + s.data[2].specificationValueDtoList[i].id + ">" + s.data[2].specificationValueDtoList[i].name + "</a></span>");
                }
                for (let i = 0; i < s.data[3].specificationValueDtoList.length; i++) {
                    $(".specification4").append("<span style='padding-right: 30px'>" +
                        "<a class='id' value=" + s.data[3].specificationValueDtoList[i].id + ">" + s.data[3].specificationValueDtoList[i].name + "</a></span>");
                }
            }
        })
    } else {
        var productName = url.substring(40);
        productName = decodeURIComponent(productName);
        goodsRequestDto={
            "productName":productName,
        }
        /*标签作为筛选条件*/
        /*通过搜索商品名筛选规格*/
        var spec = "";       //规格
        var specBrandValue = "";  //品牌规格值
        $.ajax({
            url: "/goods/specification",
            type: "get",
            data: goodsRequestDto,
            dataType: "json",
            success: function (s) {
                console.log(s);
                $(s.data).each(function () {
                    spec += "<div>" + this.name + "</div>";
                })
                $("#spec").append(spec);
                for (let i = 0; i < s.data[i].brandDtoList.length; i++) {
                    specBrandValue += "<span style='padding-right: 30px'><a class='brandId' value=" + s.data[i].brandDtoList[i].id + ">" + s.data[i].brandDtoList[i].brandName + "</a></span>"
                }
                $(".brandValue").append(specBrandValue);
                for (let i = 0; i < s.data[0].specificationValueDtoList.length; i++) {
                    $(".specification1").append("<span style='padding-right: 30px'>" +
                        "<a class='id' value=" + s.data[0].specificationValueDtoList[i].id + ">" + s.data[0].specificationValueDtoList[i].name + "</a></span>");
                }
                for (let i = 0; i < s.data[1].specificationValueDtoList.length; i++) {
                    $(".specification2").append("<span style='padding-right: 30px'>" +
                        "<a class='id' value=" + s.data[1].specificationValueDtoList[i].id + ">" + s.data[1].specificationValueDtoList[i].name + "</a></span>");
                }
                for (let i = 0; i < s.data[2].specificationValueDtoList.length; i++) {
                    $(".specification3").append("<span style='padding-right: 30px'>" +
                        "<a class='id' value=" + s.data[2].specificationValueDtoList[i].id + ">" + s.data[2].specificationValueDtoList[i].name + "</a></span>");
                }
                for (let i = 0; i < s.data[3].specificationValueDtoList.length; i++) {
                    $(".specification4").append("<span style='padding-right: 30px'>" +
                        "<a class='id' value=" + s.data[3].specificationValueDtoList[i].id + ">" + s.data[3].specificationValueDtoList[i].name + "</a></span>");
                }
            }
        })
        setTimeout(function () {
            $("#autocomplete").val(productName);
        }, 1000)
        goodsRequestDto = {
            "productName": productName
        }
        /*通过搜索的商品名查询商品*/
        $.ajax({
            url: "/goods/query/list",
            type: "get",
            data: goodsRequestDto,
            dataType: "json",
            success: function (data) {
                $(".hhhhoi").remove();
                $(".count").text(null);
                $(".totalPage").text(null);
                $("#pageIndex").text(null);
                $("#pageIndex").append(data.data.pageIndex);
                $(".count").append(data.data.totalRows);
                $(".totalPage").append(data.data.totalPage);
                for (let i = 0; i < data.data.goodsDtoList.length; i++) {
                    $(".g3").append(
                        "                        <li class=\"yui3-u-1-5 hhhhoi\" value=" + data.data.goodsDtoList[i].id + ">" +
                        "                            <div class=\"list-wrap\">" +
                        "                                <div class=\"p-img\">" +
                        "                                    <img src=" + data.data.goodsDtoList[i].goodsImgDtoList[0].goodsImg + " />" +
                        "                                </div>" +
                        "                                <div class=\"attr\">\n" +
                        "                                    <em>" + data.data.goodsDtoList[i].productName + "</em>\n" +
                        "                                </div>\n" +
                        "                                <div class=\"price\">\n" +
                        "                                    <strong>\n" +
                        "                                        <em>¥</em>\n" +
                        "                                        <i>" + data.data.goodsDtoList[i].price + "</i>\n" +
                        "                                    </strong>\n" +
                        "                                </div>\n" +
                        "                            </div>\n" +
                        "                        </li>");
                }
            }
        })
    }

    /*输入指定页面数跳转*/
    function confirm() {
        let pageIndex = $("#totalPage").val();  //输入的页数
        let page = $(".totalPage").text();       //总页数
        if (pageIndex != null) {
            if (pageIndex > page) {
                alert("输入的页面过大");
                return;
            } else if (pageIndex <= 0) {
                alert("输入的页面过小");
                return;
            }
        }
        goodsRequestDto={
            "categoryId":categoryId,
            "productName": productName,
            "pageIndex":pageIndex
        }
        $.ajax({
            url: "/goods/query/list",
            type: "get",
            data: goodsRequestDto,
            dataType: "json",
            success: function (data) {
                console.log(data);
                $(".hhhhoi").remove();
                $(".count").text(null);
                $(".totalPage").text(null);
                $("#pageIndex").text(null);
                $(".count").append(data.data.totalRows);
                $(".totalPage").append(data.data.totalPage);
                $("#pageIndex").text(data.data.pageIndex);
                for (let i = 0; i < data.data.goodsDtoList.length; i++) {
                    $(".g3").append(
                        "                        <li class=\"yui3-u-1-5 hhhhoi\" value=" + data.data.goodsDtoList[i].id + ">" +
                        "                            <div class=\"list-wrap\">" +
                        "                                <div class=\"p-img\">" +
                        "                                    <img src=" + data.data.goodsDtoList[i].goodsImgDtoList[0].goodsImg + " />" +
                        "                                </div>" +
                        "                                <div class=\"attr\">\n" +
                        "                                    <em>" + data.data.goodsDtoList[i].productName + "</em>\n" +
                        "                                </div>\n" +
                        "                                <div class=\"price\">\n" +
                        "                                    <strong>\n" +
                        "                                        <em>¥</em>\n" +
                        "                                        <i>" + data.data.goodsDtoList[i].price + "</i>\n" +
                        "                                    </strong>\n" +
                        "                                </div>\n" +
                        "                            </div>\n" +
                        "                        </li>");
                }
            }
        })
    }

    /*上一页/下一页*/
    $(document).on('click','.flipPage',function () {

        let pageIndex = $("#pageIndex").text(); //当前页
        let page = $(".totalPage").text();      //总页数
        if( $(this).text()=="«上一页"){
            pageIndex--;
            if (pageIndex<=0){
                alert("不能再往前翻了");
                return;
            }
        }else if($(this).text()=="下一页»"){
            pageIndex++;
            if (pageIndex>page){
                alert("不能再往下翻了");
                return
            }
        }
            goodsRequestDto={
                "categoryId":categoryId,
                "productName": productName,
                "pageIndex":pageIndex,
            }
        $.ajax({
            url: "/goods/query/list",
            type: "get",
            data: goodsRequestDto,
            dataType: "json",
            success: function (data) {
                console.log(data);
                $(".hhhhoi").remove();
                $(".count").text(null);
                $(".totalPage").text(null);
                $("#pageIndex").text(null);
                $(".count").append(data.data.totalRows);
                $(".totalPage").append(data.data.totalPage);
                $("#pageIndex").text(data.data.pageIndex);
                for (let i = 0; i < data.data.goodsDtoList.length; i++) {
                    $(".g3").append(
                        "                        <li class=\"yui3-u-1-5 hhhhoi\" value=" + data.data.goodsDtoList[i].id + ">" +
                        "                            <div class=\"list-wrap\">" +
                        "                                <div class=\"p-img\">" +
                        "                                    <img src=" + data.data.goodsDtoList[i].goodsImgDtoList[0].goodsImg + " />" +
                        "                                </div>" +
                        "                                <div class=\"attr\">\n" +
                        "                                    <em>" + data.data.goodsDtoList[i].productName + "</em>\n" +
                        "                                </div>\n" +
                        "                                <div class=\"price\">\n" +
                        "                                    <strong>\n" +
                        "                                        <em>¥</em>\n" +
                        "                                        <i>" + data.data.goodsDtoList[i].price + "</i>\n" +
                        "                                    </strong>\n" +
                        "                                </div>\n" +
                        "                            </div>\n" +
                        "                        </li>");
                }
            }
        })
    })

    /*热卖商品*/
    $.ajax({
        url: "/goods/recommend/goods",
        type: "get",
        dataType: "json",
        success: function (s) {
            console.log(s);
            $(s.data).each(function () {
                $(".hot").append(
                    "<li class=\"yui3-u-1-6 hhhhoi \" value="+this.id+">" +
                    "<dl class=\"picDl huozhe\">"+
                    "<dd>" +
                    "<a  class='pic' id="+this.id+"><img src="+this.goodsImgDtoList[0].goodsImg+" alt='' /></a>" +
                    "<div class='like-text'>" +
                    "<p>"+this.productName+"</p>" +
                    "<h3><span>￥</span>"+this.price+"</h3>" +
                    "</div>"+
                    "</dd></dl></li>");
            })
        }
    })


    /*点击品牌名作为筛选条件*/
    var brandId = new Array();    //品牌id
    var sfp = new Array();        //规格id
    $(document).on('click', '.brandId', function () {
        let flag = true;
        $(".tags-choose .tag").each((index, item) => {
            if ($(this).attr("value") == $(item).attr("value") || $(this).text() == $(item).find("span").text()) {
                flag = false;
                return false;
            }
        })
        if (!flag) {
            return
        }
        let sid = $(this).attr("value");

        brandId.push(sid);
        console.log(brandId);
        $(".tags-choose").append("<li class=\"tag\" value=" + sid + ">\n"+
            "<span style=\"color: red\"><span class='specificationText'>品牌</span>" + $(this).text() + "</span>\n" +
            "<i class='sui-icon icon-tb-close' value=''>品牌</i></li>");

       let goodsRequestDto={
            "sfp":sfp,
            "brandIdList":brandId,
            "productName":$("#autocomplete").val()
        }

        $.ajax({
            url:"/goods/query/list",
            type:"get",
            data:goodsRequestDto,
            dataType:"json",
            success: function (data) {
                $(".hhhhoi").remove();
                $(".count").text(null);
                $(".totalPage").text(null);
                $("#pageIndex").text(null);
                $("#pageIndex").append(data.data.pageIndex);
                $(".count").append(data.data.totalRows);
                $(".totalPage").append(data.data.totalPage);
                for (let i = 0; i < data.data.goodsDtoList.length; i++) {
                    $(".g3").append(
                        "                        <li class=\"yui3-u-1-5 hhhhoi\" value=" + data.data.goodsDtoList[i].id + ">" +
                        "                            <div class=\"list-wrap\">" +
                        "                                <div class=\"p-img\">" +
                        "                                    <img src=" + data.data.goodsDtoList[i].goodsImgDtoList[0].goodsImg + " />" +
                        "                                </div>" +
                        "                                <div class=\"attr\">\n" +
                        "                                    <em>" + data.data.goodsDtoList[i].productName + "</em>\n" +
                        "                                </div>\n" +
                        "                                <div class=\"price\">\n" +
                        "                                    <strong>\n" +
                        "                                        <em>¥</em>\n" +
                        "                                        <i>" + data.data.goodsDtoList[i].price + "</i>\n" +
                        "                                    </strong>\n" +
                        "                                </div>\n" +
                        "                            </div>\n" +
                        "                        </li>");
                }
                $(".hhhhoi").click(function () {
                    console.log($(".hhhhoi").val());
                    let id = parseInt($(".hhhhoi").val());
                    window.location.href = "/merchandise/skip/item/" + id;
                })
            }
        })
    })


    /*点击规格值作为筛选条件*/
    $(document).on('click', '.id', function () {
        let flag = true;
        $(".tags-choose .tag").each((index, item) => {
            if ($(this).attr("value") == $(item).attr("value") || $(this).text() == $(item).find("span").text()) {
                flag = false;
                return false;
            }
        })
        if (!flag) {
            return
        }

        let sid = $(this).attr("value");
        sfp.push(sid);
        console.log(sfp);
        $(".tags-choose").append("<li class=\"tag\" value=" + $(this).attr("value") + ">\n" +
            "<span style=\"color: red\"><span class='specificationText'>规格</span>" + $(this).text() + "</span>\n" +
            "<i class='sui-icon icon-tb-close' value=''>规格</i></li>");

        let goodsRequestDto={
            "sfp":sfp,
            "brandIdList":brandId,
            "productName":$("#autocomplete").val()
        }

        $.ajax({
            url:"/goods/query/list",
            type:"get",
            data:goodsRequestDto,
            dataType:"json",
            success: function (data) {
                $(".hhhhoi").remove();
                $(".count").text(null);
                $(".totalPage").text(null);
                $("#pageIndex").text(null);
                $("#pageIndex").append(data.data.pageIndex);
                $(".count").append(data.data.totalRows);
                $(".totalPage").append(data.data.totalPage);
                for (let i = 0; i < data.data.goodsDtoList.length; i++) {
                    $(".g3").append(
                        "                        <li class=\"yui3-u-1-5 hhhhoi\" value=" + data.data.goodsDtoList[i].id + ">" +
                        "                            <div class=\"list-wrap\">" +
                        "                                <div class=\"p-img\">" +
                        "                                    <img src=" + data.data.goodsDtoList[i].goodsImgDtoList[0].goodsImg + " />" +
                        "                                </div>" +
                        "                                <div class=\"attr\">\n" +
                        "                                    <em>" + data.data.goodsDtoList[i].productName + "</em>\n" +
                        "                                </div>\n" +
                        "                                <div class=\"price\">\n" +
                        "                                    <strong>\n" +
                        "                                        <em>¥</em>\n" +
                        "                                        <i>" + data.data.goodsDtoList[i].price + "</i>\n" +
                        "                                    </strong>\n" +
                        "                                </div>\n" +
                        "                            </div>\n" +
                        "                        </li>");
                }
            }
        })
    })
    /*商品名搜索*/
    function button() {
        alert(1);
        let autocomplete = $("#autocomplete").val();
        goodsRequestDto = {
            "productName": autocomplete,
        }
        $.ajax({
            url: "/goods/query/list",
            type: "get",
            data: goodsRequestDto,
            dataType: "json",
            success: function (data) {
                $(".hhhhoi").remove();
                $(".count").text(null);
                $(".totalPage").text(null);
                $("#pageIndex").text(null);
                $(".count").append(data.data.totalRows);
                $(".totalPage").append(data.data.totalPage);
                $("#pageIndex").text(data.data.pageIndex);
                for (let i = 0; i < data.data.goodsDtoList.length; i++) {
                    $(".g3").append(
                        "                        <li class=\"yui3-u-1-5 hhhhoi\" value=" + data.data.goodsDtoList[i].id + ">" +
                        "                            <div class=\"list-wrap\">" +
                        "                                <div class=\"p-img\">" +
                        "                                    <img src=" + data.data.goodsDtoList[i].goodsImgDtoList[0].goodsImg + " />" +
                        "                                </div>" +
                        "                                <div class=\"attr\">\n" +
                        "                                    <em>" + data.data.goodsDtoList[i].productName + "</em>\n" +
                        "                                </div>\n" +
                        "                                <div class=\"price\">\n" +
                        "                                    <strong>\n" +
                        "                                        <em>¥</em>\n" +
                        "                                        <i>" + data.data.goodsDtoList[i].price + "</i>\n" +
                        "                                    </strong>\n" +
                        "                                </div>\n" +
                        "                            </div>\n" +
                        "                        </li>");
                }
                /*热卖商品*/
                $.ajax({
                    url: "/goods/recommend/goods",
                    type: "get",
                    dataType: "json",
                    success: function (s) {
                        console.log(s);
                        $(s.data).each(function () {
                            $(".hot").append(
                                "<li class=\"yui3-u-1-6 hhhhoi \" value="+this.id+">" +
                                "<dl class=\"picDl huozhe\">"+
                                "<dd>" +
                                "<a  class='pic' id="+this.id+"><img src="+this.goodsImgDtoList[0].goodsImg+" alt='' /></a>" +
                                "<div class='like-text'>" +
                                "<p>"+this.productName+"</p>" +
                                "<h3><span>￥</span>"+this.price+"</h3>" +
                                "</div>"+
                                "</dd></dl></li>");
                        })
                    }
                })

            }
        })
    }
    /*删除显示的筛选条件*/
    $(document).on('click','.sui-icon',function () {
        console.log($(this).text());
        if ($(this).text()=="品牌"){
            for (let i = 0; i <brandId.length ; i++) {
                if ($(this).parent().val()==brandId[i]) {
                    brandId.splice(i,1);
                }
            }
        }else if($(this).text()=="规格"){
            for (let i = 0; i <sfp.length ; i++) {
                if ( $(this).parent().val()==sfp[i]) {
                    sfp.splice(i,1);
                }
            }
        }
        $(this).parent().remove();
        let goodsRequestDto= {
            "sfp": sfp,
            "brandIdList": brandId,
            "productName": $("#autocomplete").val()
        }
        $.ajax({
            url:"/goods/query/list",
            type:"get",
            data:goodsRequestDto,
            dataType:"json",
            success:function (data) {
                console.log(data);
                $(".hhhhoi").remove();
                $(".count").text(null);
                $(".totalPage").text(null);
                $("#pageIndex").text(null);
                $(".count").append(data.data.totalRows);
                $(".totalPage").append(data.data.totalPage);
                $("#pageIndex").text(data.data.pageIndex);
                for (let i = 0; i < data.data.goodsDtoList.length; i++) {
                    $(".g3").append(
                        "                        <li class=\"yui3-u-1-5 hhhhoi\" value=" + data.data.goodsDtoList[i].id + ">" +
                        "                            <div class=\"list-wrap\">" +
                        "                                <div class=\"p-img\">" +
                        "                                    <img src=" + data.data.goodsDtoList[i].goodsImgDtoList[0].goodsImg + " />" +
                        "                                </div>" +
                        "                                <div class=\"attr\">\n" +
                        "                                    <em>" + data.data.goodsDtoList[i].productName + "</em>\n" +
                        "                                </div>\n" +
                        "                                <div class=\"price\">\n" +
                        "                                    <strong>\n" +
                        "                                        <em>¥</em>\n" +
                        "                                        <i>" + data.data.goodsDtoList[i].price + "</i>\n" +
                        "                                    </strong>\n" +
                        "                                </div>\n" +
                        "                            </div>\n" +
                        "                        </li>");
                }
            }
        })
    })

    /*排序(销量,价格,新品,评价)*/
    $(document).on('click','.active',function () {
        console.log($(this).siblings().val());
        let arr  = new Array();

        $(".active").each(function(){
            arr.push($(this).val());
            console.log($(this).val());
        })
        console.log("synthesize:",arr);
        $(this).val($(this).val()+1);
        var synthesize=arr[0]%2==0?"true":"false";
        var sales=arr[1]%2==0?"true":"false";
        var newProduct=arr[2]%2==0?"true":"false";
        var evaluate=arr[3]%2==0?"true":"false";
        var price=arr[4]%2==0?"true":"false";
             goodsRequestDto={
                "sfp":sfp,
                "brandIdList":brandId,
                "productName":$("#autocomplete").val(),
                "sales":sales,
                "price":price,
                "newProduct":newProduct,
                "synthesize":synthesize,
                "evaluate":evaluate
            }
            $.ajax({
                url:"/goods/sort",
                type:"get",
                data:goodsRequestDto,
                dataType:"json",
                success:function (data) {
                    console.log(data);
                    $(".hhhhoi").remove();
                    $(".count").text(null);
                    $(".totalPage").text(null);
                    $("#pageIndex").text(null);
                    $(".count").append(data.data.totalRows);
                    $(".totalPage").append(data.data.totalPage);
                    $("#pageIndex").text(data.data.pageIndex);
                    for (let i = 0; i < data.data.goodsDtoList.length; i++) {
                        $(".g3").append(
                            "                        <li class=\"yui3-u-1-5 hhhhoi\" value=" + data.data.goodsDtoList[i].id + ">" +
                            "                            <div class=\"list-wrap\">" +
                            "                                <div class=\"p-img\">" +
                            "                                    <img src=" + data.data.goodsDtoList[i].goodsImgDtoList[0].goodsImg + " />" +
                            "                                </div>" +
                            "                                <div class=\"attr\">\n" +
                            "                                    <em>" + data.data.goodsDtoList[i].productName + "</em>\n" +
                            "                                </div>\n" +
                            "                                <div class=\"price\">\n" +
                            "                                    <strong>\n" +
                            "                                        <em>¥</em>\n" +
                            "                                        <i>" + data.data.goodsDtoList[i].price + "</i>\n" +
                            "                                    </strong>\n" +
                            "                                </div>\n" +
                            "                            </div>\n" +
                            "                        </li>");
                    }
                }
            })
    })
    $(document).on('click','.hhhhoi',function () {
        let goodId=$(this).val();
        window.location.href="/merchandise/skip/item/" + goodId;
    })
</script>
</html>